<template>

  <div>
    <ul>
      <li v-for="item in affectionWords" :key="item">{{ item }}</li>
    </ul>
    <el-button @click="getAffectionWord">获取情话</el-button>
  </div>

</template>
<script lang="ts" setup>
import axios from 'axios';
import { reactive } from 'vue';

// const defaultWord = await axios.get(url).then(result => result.data.content)
// console.log("default affection word", defaultWord)

const affectionWords = reactive<string[]>([])
console.log("故意等待10秒钟，可以看到Suspense 中的fall效果")
setTimeout(() => {
  console.log("the getAffectionWord is timeout")
}, 15000);
async function getAffectionWord() {
  console.log("the getAffectionWord is triggered")

  // const url = "https://api.uomg.com/api/rand.qinghua?format=json"
  const url = "/uomg/api/rand.qinghua?format=json"
  await axios.get(url).then((res) => {
    console.log(res.data)
    affectionWords.push(res.data.content)
  })
}

// await getAffectionWord()

</script>
<style lang="scss" scoped></style>
